import React from 'react'
// 导入connect方法
import { connect } from 'react-redux'
// 导入acton
import { addAction, subAction } from './Store/actions'

class Item extends React.Component {
  render() {
    const { name, num, addHandle, subHandle } = this.props
    return (
      <div className="item-container">
        <span>【{name}】商品的购买数量是：【{num}】</span>
        <button onClick={addHandle}>+</button>
        <button onClick={subHandle}>-</button>
      </div>
    )
  }
}

// mapStateToProps 接收了两个参数
// 第一个参数：表示唯一数据源 store 中的数据
// 第二个参数：表示组件本身的 props
const mapStateToProps = (state, ownProps) => {
  const { name } = ownProps
  let num = state[name]
  return {
    num,
    name
  }
}

// mapDispatchToProps 接收两个参数
// 第一个参数：用于分发 action 的dispatch
// 第二个参数：表示组件本身的 props
const mapDispatchToProps = (dispatch, ownProps) => {
  // 数量加一
  const addHandle = () => {
    // action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作
    // 同时需要添加一个属性，表示用户完成任务的动作序列号，用来标识特定的任务
    let action = addAction(ownProps)
    dispatch(action)
  }
  // 数量减一
  const subHandle = () => {
    let action = subAction(ownProps)
    dispatch(action)
  }

  return {
    addHandle,
    subHandle
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Item)
